<template>
  <el-card class="login-card">
    <el-form :model="loginForm" :rules="rules" ref="loginFormRef" label-width="60px" class="demo-ruleForm" label-position="left">
      <el-form-item label="账号" prop="username">
        <el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="loginForm.password" show-password prefix-icon="el-icon-lock"></el-input>
      </el-form-item>
      <el-checkbox label="记住我" prop="rem" v-model="loginForm.rem"></el-checkbox>
    </el-form>
    <br>
    <el-button-group class="login-btn">
      <el-button type="primary" plain @click="submitForm('')" :loading="isLoading">登录</el-button>
      <el-button type="primary" plain @click="resetForm('')">重置</el-button>
    </el-button-group>
  </el-card>
</template>

<script>
// import http from '../plugins/http.js';
import { apiLogin } from '../api/login.js';

export default {
  data() {
    return {
      isLoading: false,
      loginForm: {
        username: '',
        password: '',
        rem: false
      },
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 4, max: 10, message: '长度在 4 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'change' }
        ]
      }
    };
  },
  methods: {
    submitForm() {
      console.log(this.loginForm);
      this.isLoading = true;
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) {
          console.log('验证失败!');
          return false;
        }
        const { data: res } = await apiLogin(this.loginForm.username, this.loginForm.password);
        this.isLoading = false;
        console.log('login.vue');
        console.log(res);
        const data = res.data;
        if (!data) return false;
        const token = data.tokenHead + data.token;
        window.sessionStorage.setItem('token', token); //  会话结束后自动消除
        //  设置 cookie
        if (this.loginForm.rem) {
          this.$cookies.set('username', this.loginForm.username, '7D');//  默认是一天
          this.$cookies.set('password', this.loginForm.password, '7D');
        } else {
          this.$cookies.remove('username');
          this.$cookies.remove('password');
        }
        console.log('cookie:');
        console.log(this.$cookies.get('username'));
        await this.$router.push('/home');
        //     this.$http.post('http://118.89.176.28:8080/admin/login', this.loginForm)
        //       .then(result => {
        //         console.log(result)
        //       })
        //       .catch(result => {
        //         console.log(result)
        //       })
        //   } else {
        //     console.log('error submit!!')
        //     return false
      });
    },
    resetForm() {
      this.$refs.loginFormRef.resetFields();
    }
  },
  created() {
    this.loginForm.username = this.$cookies.get('username');
    this.loginForm.password = this.$cookies.get('password');
  }
};
</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .login-card {
    width: 480px;
    /* 水平居中 */
    margin: auto;
    /* 垂直居中 */
    transform: translateY(50%);
  }

  .login-btn {
    width: 100%;
  }

  .login-btn .el-button {
    width: 50%;
  }
</style>
